<template>
	<div id="notes">
		<div class="notes_tp">
			<i class="el-icon-arrow-left" @click="goBack"></i>
			<span class="notes_top_title">{{thistitle}}</span>
		</div>
		<div class="notes_bd">
			<div class="weui-tab">
				<div class="weui-navbar">
					<div class="weui-navbar__item weui-bar__item_on" @click="routerTo(0)">
						近期
					</div>
					<div class="weui-navbar__item" @click="routerTo(1)">
						目录
					</div>
				</div>
				<div class="weui-tab__panel">
					<div class="weui-tab_bd_1" v-show="falgs">
						<el-tree :data="data" :props="defaultProps" :render-content="renderContent"></el-tree>
					</div>
					<div class="weui-tab_bd_change" v-show="ulList">
						<ul>
							<li @click="changName">重命名</li>
							<li @click="delFolder">删除</li>
							<li @click="moveFolder(data)">移动到</li>
						</ul>
					</div>
					<div class="weui-tab_bd_2" v-show="free">
						<div class="weui-tab_bd_2_bg">
							<div class="weui-tab_bd_2_bg_1" v-for="item in list">
								<div class="bd_bg_title_top" @click="detail(item.id)">
									<p class="bd_bg_title_top_1">{{item.name}}</p>
									<p class="bd_bg_title_top_2">
										<span class="title_top_2_span1">{{item.createTime}}</span>
									</p>
									<p class="bd_bg_title_top_3">{{item.desc}}</p>
								</div>
							</div>
						</div>
					</div>
					<div class="bd_bg_last">
						<div class="bd_bg_ft">
							<p class="el-icon-plus" v-show="see" @click="openMenue"></p>
							<p class="el-icon-close" v-show="sees" @click="closeMenue"></p>
						</div>
						<div class="bd_bg_ft1" v-show="open">
							<ul>
								<li>
									<p class="ft_p">更多模板</p>
									<img src="../../../assets/img/show.png" class="ft_img" />
								</li>
								<li>
									<p class="ft_p">Markdown</p>
									<img src="../../../assets/img/show.png" class="ft_img" />
								</li>
								<li>
									<p class="ft_p">更多模板</p>
									<img src="../../../assets/img/show.png" class="ft_img" />
								</li>
								<li>
									<p class="ft_p">更多模板</p>
									<img src="../../../assets/img/show.png" class="ft_img" />
								</li>
								<li @click="routerTos(folderId)">
									<p class="ft_p">文本</p>
									<img src="../../../assets/img/show.png" class="ft_img" />
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import NoteTree from '@/components/works/children/NoteTree'
	var timeOutEvent = 0; //定时器  
	export default {
		name: 'notes',
		data() {
			return {
				thistitle: '',
				falgs: false,
				free: true,
				data: [],
				list: {},
				Loop: 0,
				type: '',
				thisid:'',
				ulList: false,
				folderId: '2',
				see: true,
				sees: false,
				open: false,
				defaultProps: {
					children: 'children',
					label: 'label'
				},

			}
		},
		methods: {
			goBack() {
				history.back(-1)
			},
			routerTo(index) {
				if(index == 0) {
					$(".weui-navbar__item").eq(0).addClass("weui-bar__item_on");
					$(".weui-navbar__item").eq(1).removeClass("weui-bar__item_on");
					this.falgs = false;
					this.free = true;
					this.type = " folder";
					this.folderId = "2";

				} else if(index == 1) {
					$(".weui-navbar__item").eq(1).addClass("weui-bar__item_on");
					$(".weui-navbar__item").eq(0).removeClass("weui-bar__item_on");
					this.falgs = true;
					this.free = false;
				}
			},
			routerTos(thisfolderId) {
				if(this.$util.isEmpty(thisfolderId)) {
					this.$message({
						message: '请选择文件夹'
					});
				} else {
					this.$router.push({
						path: 'TextChange',
						query: {
							thisfolderId: thisfolderId
						}
					})
				}
			},
			handleNodeClick(clickdata) {
				if(clickdata.fileType != "folder") {
					this.$router.push({
						path: 'NoteDetail',
						query: {
							thisid: clickdata.id,
						}
					})
				} else {
					this.type = clickdata.fileType,
					this.folderId = clickdata.id
				}
			},
			openMenue() {
				this.open = true;
				this.see = false;
				this.sees = true;
				$(".weui-tab_bd").css({
					"opacity": "0.6"
				});
				$(".bd_bg_last").css({
					"opacity": "2"
				});

			},
			closeMenue() {
				this.open = false;
				this.see = true;
				this.sees = false;
				$(".weui-tab_bd").css({
					"opacity": "1"
				});
			},

			detail(thisid) {
				this.$router.push({
					path: 'NoteDetail',
					query: {
						id: thisid,

					}
				})
			},
			gotouchstart(node, data, event) {
				console.log(data);
				console.log(1123);
				let that = this;
				clearTimeout(timeOutEvent); //清除定时器
				timeOutEvent = 0;
				timeOutEvent = setTimeout(function() {
//					debugger
					that.ulList = true;
					that.$options.methods.handleNodeClick();
					// if(that.data[index].fileType == "folder"){
					// 	console.log("文件夹不能移动")
					// 	that.ulList = false;
					// }else{
					// 	console.log(that.data[index].pid)
					// }
					// that.$nextTick(() => {
					// 	debugger
					// 	var rad='';
				 //        var ridsa = that.$refs.tree.getCheckedKeys().join(',');// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
				 //        var ridsb = that.$refs.tree.getCheckedNodes();// 获取当前的选中的数据{对象}
				 //        ridsb.forEach(ids=>{//获取选中的所有的父级id
				 //          rad+=','+ids.pid;
				 //        })
				 //        rad=rad.substr(1) ;// 删除字符串前面的','
				 //        var rids=rad+','+ridsa;
				 //        var arr=rids.split(',');//  把字符串转换成数组
				 //        arr=[...new Set(arr)]; // 数组去重
				 //        rids=arr.join(',');// 把数组转换成字符串
				 //        console.log(rids);
					// })
						
				}, 1000); //这里设置定时
				
			},
			gotouchend() {
				clearTimeout(timeOutEvent);
			},
			gotouchmove() {
				clearTimeout(timeOutEvent); //清除定时器
				timeOutEvent = 0;
			},

			changName() {
//				debugger
				this.$prompt('请输名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					if(this.$util.isEmpty(value)) {
						this.$message({
							message: '名称不能为空'
						});
					} else {
						let params = {
							id: this.folderId,
							type: this.type,
							name: value
						}
						this.$post("/app/post/AppMyNoteController/editNoteFileName", params).then((json) => {
							if(json.returnCode == 0) {
								this.$message({
									type: 'success',
									message: '重命名成功!',
								});
								this.ulList = false;
							} else {
								this.$message({
									message: json.returnMessage
								});
							}
							history.back(-1);
						});
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});

			},

			delFolder() {
				this.$confirm('是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
//					debugger
					let params = {
						id: this.folderId,
						type: this.type 
					}
					this.$post("/app/post/AppMyNoteController/deleteFileFolderById", params).then((json) => {
						if(json.returnCode == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.ulList = false;
						} else {
							this.$message({
								message: json.returnMessage
							});
						}
 					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			moveFolder(thisData) {
				// debugger
				this.$router.push({
					path: 'NoteTree',
					query: {
						thisData:thisData, 
					}
				})

			},
			
			renderContent(h, { node, data, store }) {
			    let icon;
			    let platForm = data.fileType;
			    if(platForm == 'folder'){
			        icon = (<icon-svg icon-style="icon-style" icon-class="el-icon-pc"></icon-svg>);
			    }else{
			        icon = (<icon-svg icon-style="icon-style" icon-class="el-icon-wx"></icon-svg>);
				}
//			     @touchstart="gotouchstart()" @touchmove="gotouchmove" @touchend="gotouchend"
			    return (<span style="font-size: 14px; padding-right: 8px" on-touchstart={() => this.gotouchstart(node, data, event)}>
		                  	<span class="normalText">
		                      	<span style="color: #333;">{data.label}</span>
		                  	</span>
		              	</span>);
			}       
		},
		created() {
			let res = '';
			let code = '';
			let _this = this;
			let params = {

			}
			this.thisurl = this.$route.query.thisurl
			this.thistitle = this.$route.query.thistitle
			this.$post("/app/post/AppMyNoteController/queryNoteAllFile", params).then((json) => {
				if(json.returnCode == 0) {
					_this.data = json.rows;
					_this.baseurl = this.NET.BASE_URL;
				} else {
					this.$message({
						message: json.returnMessage
					});
				}
			});

			this.$post("/app/post/AppMyNoteController/queryNewNote", params).then((json) => {
				if(json.returnCode == 0) {
					_this.list = json.rows;
					_this.baseurl = this.NET.BASE_URL;
				} else {
					this.$message({
						message: json.returnMessage
					});
				}
			});          
		},
		components: {
			NoteTree
		},
		mounted(){
			  let noteTreeId = this.$route.query.id;
			 //  let params = {
			 //  
			 //  }
			 // this.$post("/app/post/AppMyNoteController/editNoteToMoveById", params).then((json) => {
			 // 	if(json.returnCode == 0) {
			 // 		
			 // 	} else {
			 // 		this.$message({
			 // 			message: json.returnMessage
			 // 		});
			 // 	}
			 // });
		}
	}
</script>

<style scoped="scoped">
	#notes {
		width: 100%;
		height: 100%;
		font-size: 0.14rem;
	}
	
	.notes_tp {
		width: 100%;
		height: 0.45rem;
		position: fixed;
		z-index: 999;
		background-color: lightblue;
	}
	
	.el-icon-arrow-left {
		font-size: 0.3rem;
		margin-top: 0.1rem;
		margin-left: 0.1rem;
	}
	
	.notes_top_title {
		font-size: 0.2rem;
		margin-left: 1.2rem;
		margin-top: 0.05rem;
	}
	
	.weui-navbar {
		width: 100%;
		position: fixed;
		z-index: 999;
	}
	
	.weui-tab__panel {
		margin-top: 0.55rem;
	}
	
	.notes_bd {
		width: 100%;
		height: 100%;
		padding-top: 0.45rem;
	}
	
	.weui-tab_bd_1 {
		width: 100%;
	}
	
	.weui-tab_bd_change {
		width: 60px;
		height: 100px;
		position: relative;
		background-color: white;
		border: 1px solid gainsboro;
		margin-left: 40%;
	}
	
	.weui-tab_bd_change ul {
		list-style: none;
	}
	
	.weui-tab_bd_change ul li {
		text-align: center;
		width: 60px;
		height: 20px;
		margin-top: 12px;
		border-bottom: 1px solid gainsboro;
	}
	
	.weui-tab_bd_2 {
		width: 100%;
		height: 100%;
		/*background-color: aqua;*/
	}
	
	.weui-tab_bd_2_bg {
		width: 100%;
		height: 100%;
	}
	
	.weui-tab_bd_2_bg_1 {
		width: 100%;
		margin-top: 10px;
		border-bottom: 1px solid gainsboro;
	}
	
	.bd_bg_title_top_1 {
		margin-left: 0.2rem;
		font-size: 0.25rem;
		font-weight: 600;
		font-family: "幼圆";
		width: 90%;
		margin: auto;
	}
	
	.bd_bg_title_top_2 {
		margin-left: 0.2rem;
		font-size: 0.12rem;
		width: 90%;
		margin: auto;
	}
	
	.title_top_2_span1 {
		display: block;
		width: 90%;
	}
	
	.bd_bg_title_top_3 {
		margin-left: 0.2rem;
		font-size: 0.15rem;
		width: 90%;
		margin: auto;
	}
	
	.bd_bg_ft {
		width: 55px;
		height: 55px;
		position: fixed;
		z-index: 999;
		right: 0.35rem;
		bottom: 0.6rem;
		border-radius: 50px;
		background-color: lightblue;
	}
	
	.el-icon-plus {
		font-size: 40px;
		margin-top: 6px;
		margin-left: 8px;
		font-weight: bold;
		color: white;
	}
	
	.el-icon-close {
		font-size: 40px;
		margin-top: 6px;
		margin-left: 8px;
		font-weight: bold;
		color: white;
	}
	
	.bd_bg_ft1 {
		width: 150px;
		position: fixed;
		z-index: 999;
		right: 0.3rem;
		bottom: 1.2rem;
	}
	
	.bd_bg_ft1 ul {
		width: 150px;
		background-color: white;
		opacity: 0.95;
		list-style: none;
	}
	
	.bd_bg_ft1 ul li {
		width: 100%;
		height: 60px;
		margin-top: 10px;
		/*background-color: aqua;*/
		display: flex;
	}
	
	.ft_p {
		display: block;
		width: 80px;
		height: 30px;
		font-size: 15px;
		position: absolute;
		margin-top: 10px;
		padding-top: 5px;
		margin-left: 5px;
		text-align: center;
		color: black;
		border: 1px solid gainsboro;
	}
	
	.ft_img {
		width: 50px;
		height: 50px;
		position: absolute;
		margin-left: 90px;
		margin-top: 5px;
	}
	
	.el-message-box {
		width: 50%;
	}
</style>